<template>
<el-main>
<el-row>
<el-col  :span="22" :offset="1" >
    <el-alert  title="本地存储即是Yserver服务，当前服务是bate版功能，实验环境下测试正常可用，用后续将继续完善" type="warning" close-text="知道了">
</el-alert>
</el-col>
<el-col><div style="height:20px"></div></el-col>
</el-row>
<el-row>
<el-col :span="20" :offset="1">
<el-tabs type="border-card">
<el-tab-pane label="服务配置">

<el-row>
        <el-col  :span="8" :offset="5">
        <el-form :model="formData" size="mini">
            <el-form-item label="存储路径" :label-width="formLabelWidth">
                <el-input v-model="formData.savepath" :disabled=true autocomplete="off"><el-button slot="append" icon="el-icon-search" @click="enableDirSearch('savepath')"></el-button></el-input>
            </el-form-item>
            <el-form-item label="启用状态" :label-width="formLabelWidth" >
                <el-switch v-model="formData.enable" @change="enable">
                </el-switch>
            </el-form-item>
            <el-form-item label="端口" :label-width="formLabelWidth" >
                <el-input v-model="formData.port"  autocomplete="off" :disabled=true></el-input>
            </el-form-item>
            <el-form-item label="上传用户" :label-width="formLabelWidth" >
                <el-input v-model="formData.username"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="上传密码" :label-width="formLabelWidth" >
                <el-input v-model="formData.password" show-password autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="" :label-width="formLabelWidth" >
                <el-button type="primary" @click="submit">确定</el-button>
            </el-form-item>
        </el-form>
        </el-col>
    </el-row>

    </el-tab-pane>
</el-tabs>
</el-col>
</el-row>

<el-dialog title="请选择" :visible.sync="dialogDirVisible">
    <dirlist :dialogDirVisible="dialogDirVisible" :key-name="keyName" @close="changeDir"></dirlist>
</el-dialog>
</el-main>

</template>
<script>
import Dirlist from '@/components/Dirlist.vue';

export default {
   components:{Dirlist},
    data(){
        return {
            keyName:"",
            dialogDirVisible:false,
            formData:{enable:false},
            dialogFormVisible:false,
            formLabelWidth:"120px"
        }
    },
    created(){
        this.getlist()
    },
    methods:{
        changeDir(dirpath){
            this.formData[dirpath.name]=dirpath.value
            this.dialogDirVisible=false          
        },
        enableDirSearch(str){
            if(this.formData.enable){
                this.$message('请先关闭服务');
                return
            }
          this.keyName=str
          this.dialogDirVisible=true
      },
        getlist(){
            this.$http.Get(this.$api.serviceUpload,{},(res)=>{
                this.formData=res
            })
        },
        submit(){
                this.$http.Put(this.$api.serviceUpload+"/"+this.formData.id,this.formData,()=>{
                    this.getlist()
                },"修改Yserver配置")
        },
        enable(){
            if(this.formData.savepath === ""){
                this.$message('没有选择路径，无法开启');
                this.formData.enable=false
                return
            }
        }
    }
}
</script>